<template>
    <div class="lessondetail">
        <!-- 头部 -->
        <div class="header">
            <div @click="go">
                <span>⬅</span>
            </div>
            <h2>课程详情</h2>
            <div class="search">
                <span>┅</span>
            </div>
        </div>

        <!-- 内容 -->
        <div class="body">
            <div >
                <!-- top -->
                <div class="info" >
                    <div class="up">
                        <p class="title">{{lessondetail.info.title}}</p>
                        <span class="collect">⭐</span>
                    </div>
                    <p class="price">{{lessondetail.info.price}}</p>
                    <div class="down">
                        <p class="lessontime">共{{lessondetail.info.total_periods}}课时 | {{lessondetail.info.sales_num}}人已报名</p>
                        <p class="lessontime">开课时间:2019.08.26 05:00-2019.09.07 23:00</p>
                    </div>
                </div>

                <!-- 活动区域 -->
                <div class="activity">
                    <div>活动：</div>
                    <div class="activity-center">
                        <p class="ptext">优惠</p>
                        <span>领取优惠券最多可减</span>
                        <span>10</span>
                    </div>
                    <div>领取</div>
                </div>

                <!-- 教学团队 -->
                <div class="team">
                    <h2>教学团队</h2>
                    <div class="team-content"  v-for="(item1,index) in lessondetail.teachers" :key="item1.teacher_id">
                        <img :src="item1.avatar" alt="">
                        <span>{{item1.teacher_name}}</span>
                    </div>
                </div>

                <!-- 课程介绍 -->
                <div class="introduce">
                    <h2>课程介绍</h2>
                    <p class="ptext1">但是粉丝地方水电费订单</p>
                </div>

                <!-- 课程大纲 -->
                <div class="details-outline">
                    <h2>课程大纲</h2>
                    <div class="content">
                        <div class="try">试看</div>
                        <div class="try">回放</div>
                        <span class="span1"> 课时</span>
                        <span class="span1">(试看)</span>
                    </div>
                    <div class="try2">
                        <span class="span1">黄老师</span>
                        <span class="span1">2019年08月26日 05:00-23:00</span>
                    </div>
                </div>

                <!-- 课程评论 -->
                <div class="speak">
                    <h2>课程评论</h2>
                    <img class="imgg" src="@/assets/images/empty.png" alt="">
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import { lessondetail } from "../api/index"
    export default {
        name: 'Lessondetail',
        data() {
            return {
                lessondetail: {
                    info:{},
                    teachers:{},
                    couponList:{}
                },
            }
        },
        mounted() {
            this.detail()
        },
        methods: {
            async detail() {
                const res = await lessondetail(this.$route.query.ID)
                console.log(res)
                this.lessondetail = res.data
                console.log(this.lessondetail)
            },
            go() {
                // this.$router.push("/home")
                // this.$router.go(-1)
                window.history.go(-1)
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #eee;
    }

    .body {
        width: 100%;
        background: #f0f2f5;
    }

    .info {
        width: 100%;
        background: white;
        padding: 15px;
        box-sizing: border-box;
    }

    .up {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title {
        font-size: 22px;
    }

    .collect {
        font-size: 16px;
    }

    .price {
        color: red;
        font-size: 16px;
        margin: 5px;
    }

    .lessontime {
        color: gray;
        font-size: 18px;
        margin: 5px;
    }

    .activity {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 15px;
    }

    .activity-center {
        width: 70%;
        display: flex;
        align-items: center;
    }

    .ptext {
        width: 30px;
        height: 16px;
        text-align: center;
        margin: 0 5px;
        background: tan;
        border-radius: 5px;
        color: #000;
    }

    .team {
        height: 120px;
        background: white;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 15px;
    }

    .team-name {
        font-size: 18px;
        font-weight: 500;
    }

    .team-content {
        height: 80px;
        margin-top: 15px;
    }

    img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }

    .introduce {
        background: white;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 15px;
        height: 80px;
    }

    .ptext1 {
        font-size: 16px;
        margin: 5px;
    }

    .details-outline {
        height: 100px;
        background: white;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 15px;
    }

    .content {
        padding: 0 5px;
        box-sizing: border-box;
        display: flex;

    }

    .span1 {
        width: 35px;
        height: 20px;
        margin: 5px;
        line-height: 20px;
        text-align: center;
        border-radius: 2px;
    }

    .try {
        margin: 6px;
        background: orange;
        line-height: 25px;

    }

    .try2 {
        padding: 0 15px;
        box-sizing: border-box;
    }

    .speak {
        width: 100%;
        background: white;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 15px;
        height: 200px;
    }

    .imgg {
        width: 150px;
        height: 150px;
        margin-left: 35%;
    }
</style>